<template>
  <div class="equipmentModel">
    <div class="header">
      <el-form
        :inline="true"
        :model="formInline"
        size="small"
        label-width="70px"
      >
        <el-form-item label="设备类型">
          <el-select
            v-model="formInline.type"
            placeholder="请选择设备类型"
            @change="onChange($event, 'type')"
            filterable
            clearable
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号">
          <el-select
            v-model="formInline.version"
            placeholder="请选择设备型号"
            @change="onChange($event, 'version')"
            filterable
            clearable
          >
            <el-option
              v-for="item in versionList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="add"
            >添加设备型号</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table
        class="table"
        ref="table"
        :data="tableData"
        row-key="id"
        :header-cell-style="{
          width: '100%',
          background: '#FAFAFA',
          color: '#606266',
          height: '60px'
        }"
        border
      >
        <el-table-column
          label="序号"
          prop="no"
          width="100"
          align="center"
          :show-overflow-tooltip="tooltip"
        >
          <template slot-scope="scoped">
            <div>
              <span v-if="scoped.row.no == null" style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.no }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="设备型号"
          prop="device_model_name"
          align="center"
          :show-overflow-tooltip="tooltip"
          min-width="150"
        >
          <template slot-scope="scoped">
            <div>
              <span
                v-if="scoped.row.device_model_name == null"
                style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.device_model_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="设备类型"
          prop="device_type_name"
          min-width="150"
          :show-overflow-tooltip="tooltip"
          align="center"
        >
          <template slot-scope="scoped">
            <div>
              <span
                v-if="scoped.row.device_type_name == null"
                style="color: red"
                >暂无数据</span
              >
              <span v-else>{{ scoped.row.device_type_name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="保修期"
          prop="deviceGuarantee"
          :show-overflow-tooltip="tooltip"
          width="120"
          align="center"
          sortable
        >
          <template slot-scope="scope">{{
            !scope.row.deviceGuarantee ||
            scope.row.deviceGuarantee === "" ||
            scope.row.deviceGuarantee === null
              ? "--"
              : scope.row.deviceGuarantee + "年"
          }}</template>
        </el-table-column>
        <el-table-column
          label="设备图片"
          prop="devicePicture"
          :show-overflow-tooltip="tooltip"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            <viewer>
              <img
                alt
                :src="
                  !scope.row.devicePicture ||
                  scope.row.devicePicture === '' ||
                  scope.row.devicePicture === null
                    ? errImg
                    : scope.row.devicePicture
                "
                :onerror="errImg"
                title="查看高清图片"
                class="img"
              />
            </viewer>
          </template>
        </el-table-column>
        <el-table-column
          label="描述"
          min-width="150"
          prop="describe"
          :show-overflow-tooltip="tooltip"
          align="center"
        ></el-table-column>
        <el-table-column
          label="添加时间"
          prop="add_time"
          width="180"
          align="center"
          :show-overflow-tooltip="tooltip"
          sortable
        ></el-table-column>
        <el-table-column
          label="操作"
          prop="operation"
          width="280"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="info"
              plain
              size="small"
              slot="reference"
              style="margin-left: 10px"
              @click="goShowQuestion(scope.row.id, scope.row.deviceTypeId)"
              >查看问题</el-button
            >
            <el-button
              type="success"
              plain
              size="small"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="确定删除该条数据？"
              @onConfirm="del(scope.row)"
            >
              <el-button
                type="danger"
                plain
                size="small"
                slot="reference"
                style="margin-left: 10px"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-drawer
      @close="resetForm('ruleForm')"
      :title="type === 'add' ? '添加设备型号' : '编辑设备型号'"
      size="540px"
      custom-class="custom-drawer"
      :visible.sync="visible"
    >
      <el-form
        size="small"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="el-drawer-ruleForm"
      >
        <!-- <el-form-item label="公司名称:" prop="companyId">
          <el-select
            v-model="ruleForm.companyId"
            clearable
            placeholder="请选择公司名称"
            @change="handlercompanyId"
          >
            <el-option
              v-for="item in companySelList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-form-item label="设备类型" prop="type">
          <el-select
            class="formItem"
            v-model="ruleForm.type"
            placeholder="请选择设备类型"
            filterable
            clearable
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号" prop="name">
          <el-input
            v-model="ruleForm.name"
            clearable
            placeholder="请输入设备型号"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备图片" prop="picture">
          <!--组件上的ref必须是表单项上的ref+Avatar拼接,如表单项为 staff,组件则是 staffAvatar-->
          <UploadImg
            @getImgSrc="getImg"
            :options="options"
            :list="ruleForm.picture"
          />
        </el-form-item>
        <el-form-item label="保修期" prop="warranty">
          <el-input
            class="formItem"
            oninput="this.value=this.value.replace(/[^\d.]/g,'');"
            maxlength="10"
            v-model="ruleForm.warranty"
            placeholder="请输入保修期"
            clearable
          >
            <span slot="suffix">年</span>
          </el-input>
        </el-form-item>
        <el-form-item label="型号描述">
          <el-input
            type="textarea"
            placeholder="请输入型号描述"
            v-model="ruleForm.remark"
            clearable
            :rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <div class="el-drawer__footer">
        <el-button
          type="primary"
          @click.prevent="submitForm('ruleForm')"
          :loading="confirmLoading"
          >{{ confirmLoading ? "保 存 中..." : "保 存" }}</el-button
        >
        <el-button @click="resetForm('ruleForm')">取 消</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  deviceModelList,
  devicTypeList,
  devicModelList,
  deviceModelAdd,
  deviceModelEdit,
  deviceModelDel,
  companySel
} from "../../utils/api";
import UploadImg from "../../components/UploadImg";
import { mapState, mapGetters } from "vuex";
//设备型号
export default {
  name: "EquipmentModel",
  props: ["height"],
  data() {
    return {
      options: {
        type: "picture-card",
        limit: 1
      },
      errImg: 'this.src="' + require("../../assets/images/chest.png") + '"',
      formInline: {
        type: "", //设备类型
        version: "" //设备型号
      },
      versionList: [], //设备型号列表
      typeList: [], //设备类型列表
      tableData: [], //表格数据
      pageSizes: [10, 20, 30, 40, 50], //每页选择条数
      total: 0, //总条数
      currentPage: 1, //当前页
      pageSize: 10, //每页条数
      tooltip: true,
      visible: false,
      confirmLoading: false, //按钮加载
      type: "add",
      ruleForm: {
        name: "", //设备型号
        remark: "", //描述
        picture: "", //图片
        warranty: "", //保修期
        type: "", //设备类型
        companyId: "" //公司id
      },
      rules: {
        name: [
          { required: true, message: "请输入设备型号", trigger: "change" }
        ],
        warranty: [
          { required: true, message: "请输入设备保修期", trigger: "change" }
        ],
        type: [
          { required: true, message: "请选择设备类型", trigger: "change" }
        ],
        companyId: [
          { required: true, message: "请选择公司", trigger: "change" }
        ],
        picture: [
          { required: true, message: "请上传设备图片", trigger: "change" }
        ]
      },
      userInfo: {}, //用户信息
      currentRow: {}, //当前行信息
      // 公司的列表
      companySelList: []
    };
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    // this.getInit();
    // this.getcompanySel();
    this.getDataInit();
  },
  methods: {
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getInit();
      }
    },
    async getInit() {
      await this.getSelect();
      await this.getData();
    },
    //下拉框改变事件
    onChange(value, key) {
      this.formInline[key] = value;
      this.currentPage = 1;
      this.getData();
    },
    //获取搜索下拉列表事件
    async getSelect() {
      this.typeList = await this.postRequest(devicTypeList, {
        companyId: this.org_id
      }).then(res => res.data); //设备类型列表
      this.versionList = await this.postRequest(devicModelList, {
        companyId: this.org_id
      }).then(res => res.data); //设备型号
    },
    getData() {
      const params = {
        pageSize: this.pageSize,
        pageNumber: this.currentPage,
        device_type_id: this.formInline.type, //设备类型
        device_model_id: this.formInline.version, //设备型号
        companyId: this.org_id
      };
      this.postRequest(deviceModelList, params).then(res => {
        if (res.code === 200) {
          this.total = res.data.count;
          this.tableData = res.data.data;
        }
      });
    },
    //分页
    handleSizeChange(val) {
      //每页条数
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      //当前第几页
      this.currentPage = val;
      this.getData();
    },
    //添加设备型号
    add() {
      this.visible = true;
      this.type = "add";
    },
    //编辑设备型号
    edit(row) {
      this.currentRow = row;
      this.type = "edit";
      this.visible = true;
      this.ruleForm = {
        name: row.device_model_name, //设备型号
        remark: row.describe, //描述
        picture: row.devicePicture.split(","), //图片
        warranty: row.deviceGuarantee, //保修期
        type: row.deviceTypeId //设备类型
      };
    },
    //删除设备型号
    del(row) {
      const params = {
        user_id: this.userInfo.id,
        id: row.id
      };
      this.postRequest(deviceModelDel, params).then(res => {
        if (res.code === 200) {
          this.getInit();
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = {
            user_id: this.userInfo.id,
            name: this.ruleForm.name, //设备型号名称
            deviceGuarantee: this.ruleForm.warranty, //保修期
            deviceTypeId: this.ruleForm.type, //设备类型
            companyId: this.org_id, //公司id
            describe:
              !this.ruleForm.remark ||
              this.ruleForm.remark === "" ||
              this.ruleForm.remark === null
                ? ""
                : this.ruleForm.remark, //设备型号描述
            devicePicture: this.ruleForm.picture.join(",") //设备图片
          };
          const url = this.type === "add" ? deviceModelAdd : deviceModelEdit;
          if (this.type === "edit") params.id = this.currentRow.id;
          this.confirmLoading = true;
          this.postRequest(url, params)
            .then(res => {
              this.confirmLoading = false;
              if (res.code === 200) {
                this.resetForm(formName);
                this.getInit();
              }
            })
            .catch(err => {
              this.confirmLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.visible = false;
      if (this.$refs.picture) this.$refs.picture.clear();
      this.ruleForm = {
        name: "", //设备型号
        remark: "", //描述
        picture: "", //图片
        warranty: "", //保修期
        type: "" //设备类型
      };
    },
    getImg(img) {
      //设备图片
      if (img && img !== "" && img !== null) {
        this.ruleForm.picture = img;
      }
    },
    // 获取问题列表
    goShowQuestion(id, deviceTypeId) {
      this.$router.push("/Question");
      window.sessionStorage.setItem("ModelID", id);
      window.sessionStorage.setItem("deviceTypeId", deviceTypeId);
    }
  },
  computed: {
    ...mapState(["org_id"])
  },
  watch: {
    org_id(val) {
      this.currentPage = 1;
      this.getInit();
    }
  },
  components: { UploadImg }
};
</script>
<style scoped>
.formItem {
  width: 100%;
}

.header >>> .el-form-item {
  margin-bottom: 0;
}

.header {
  padding: 20px 30px;
  border: 1px solid #eaedf3;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 97%;
  margin: 0 auto;
}

.content {
  padding: 30px;
  box-sizing: border-box;
}

.img {
  width: 90px;
  height: 60px;
  border-radius: 4px;
}

/*设备名称*/
.content {
  padding-right: 20px;
  overflow: hidden;
  width: 100%;
}

.name {
  display: flex;
  align-items: center;
}

.icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.label {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #606266;
  margin-bottom: 10px;
}

.label:last-of-type {
  margin-bottom: 0;
}
</style>
